<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>基础数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>申请信息管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 申请信息卡片 -->
    <el-card class="box-card">
      <!-- 顶部搜索栏 -->
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="学号">
            <el-input
              v-model="formInline.studentId"
              placeholder="请输入学生学号"
            ></el-input>
          </el-form-item>
          <el-form-item label="审核状态">
            <el-select v-model="formInline.region" placeholder="审批状态">
              <el-option label="全部" value="0"></el-option>
              <el-option label="未审核" value="1"></el-option>
              <el-option label="已审核" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 数据表 -->
      <div class="card-body">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          height="28rem"
          :row-class-name="tableRowClassName"
        >
          <el-table-column fixed prop="student.id" label="学号" width="180">
          </el-table-column>
          <el-table-column prop="student.realName" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="job.name" label="申请岗位"> </el-table-column>
          <el-table-column prop="projectName" label="所属项目" width="240">
          </el-table-column>
          <el-table-column prop="applyTime" label="申请时间" width="160">
          </el-table-column>
          <el-table-column prop="job.status" label="当前状态" width="100">
            <template slot-scope="scope">
              {{ scope.row.status | setStatusText }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="155">
            <template slot-scope="scope">
              <el-button
                @click="checkClick(scope.row)"
                size="small"
                type="warning"
                v-if="scope.row.status === 0"
              >
                <i class="el-icon-s-check icon">
                  <span>审 核</span>
                </i>
              </el-button>
              <el-button
                @click="checkClick(scope.row)"
                size="small"
                type="info"
                v-else
              >
                <i class="el-icon-s-custom icon">
                  <span>详细信息</span>
                </i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="block table-footer">
        <Paging :PageData="tableDataPage"></Paging>
      </div>
    </el-card>

    <!-- 点击info按钮弹出对话框 -->
    <el-dialog title="详细信息" :visible.sync="checkDialog.checkDialogVisible">
      <!-- 学生信息 -->
      <div class="student-info-box">
        <img src="../assets/logo.png" />
        <div class="info">
          <el-descriptions title="学生信息" border>
            <el-descriptions-item label="学号">
              {{ checkDialog.info.student.id }}
            </el-descriptions-item>
            <el-descriptions-item label="姓名">
              {{ checkDialog.info.student.realName }}
            </el-descriptions-item>
            <el-descriptions-item label="性别">
              {{ checkDialog.info.student.sex | setSexText }}
            </el-descriptions-item>
            <el-descriptions-item label="专业">
              {{ checkDialog.info.student.major }}
            </el-descriptions-item>
            <el-descriptions-item label="班级">
              {{ checkDialog.info.student.className }}
            </el-descriptions-item>
            <el-descriptions-item label="手机号">
              {{ checkDialog.info.student.phone }}
            </el-descriptions-item>
            <el-descriptions-item label="邮箱">
              {{ checkDialog.info.student.email }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>

      <!-- 分割线 -->
      <el-divider></el-divider>

      <!-- 岗位信息 -->
      <div class="job-info">
        <el-descriptions title="岗位信息" :column="2" border>
          <el-descriptions-item label="岗位ID">
            {{ checkDialog.info.job.id }}
          </el-descriptions-item>
          <el-descriptions-item label="所属项目ID">
            {{ checkDialog.info.job.projectId }}
          </el-descriptions-item>
          <el-descriptions-item label="岗位名称">
            {{ checkDialog.info.job.name }}
          </el-descriptions-item>
          <el-descriptions-item label="所属项目名称">
            {{ checkDialog.info.projectName }}
          </el-descriptions-item>
          <el-descriptions-item label="岗位薪资">
            {{ checkDialog.info.job.salary }}
          </el-descriptions-item>
          <el-descriptions-item label="工作地址">
            {{ checkDialog.info.job.address }}
          </el-descriptions-item>
          <el-descriptions-item label="工作日期">
            {{ checkDialog.info.job.workDate }}
          </el-descriptions-item>
          <el-descriptions-item label="工作时间">
            {{ checkDialog.info.job.workTime }}
          </el-descriptions-item>

          <el-descriptions-item label="提交申请时间">
            {{ checkDialog.info.applyTime }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 同意/拒绝按钮 -->
      <span
        v-if="checkDialog.info.status === 0"
        slot="footer"
        class="dialog-footer"
      >
        <el-button type="primary" @click="applySuccess"> 同意申请 </el-button>
        <el-button type="danger" @click="applyFail"> 拒绝申请 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Paging from "../components/Paging.vue";
import { getPagList } from "../api/apply";
import { select } from "../api/apply";

export default {
  data() {
    return {
      formInline: {
        studentId: "",
        region: "0",
      },
      tableDataPage: {
        pageSizes: [5, 10, 50, 100],
        pageSize: 5,
        currentPage: 1,
        total: 0,
      },
      tableData: [],
      checkDialog: {
        checkDialogVisible: false,
        info: {
          applyTime: "",
          projectName: "",
          student: {},
          job: {},
        },
      },
    };
  },
  components: {
    Paging,
  },
  methods: {
    //改变行颜色
    tableRowClassName({ row }) {
      switch (row.status) {
        case 0:
          return "warning-row";
        case 1:
          return "success-row";
        case 2:
          return "danger-row";
        case 3:
          return "cancel-row";
        default:
          return "";
      }
    },

    //搜索
    search() {
      select({
        id: this.formInline.studentId,
        status: this.formInline.region,
        currentPage: this.tableDataPage.currentPage,
        pageSize: this.tableDataPage.pageSize,
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.data.data;
        this.tableDataPage.total = res.data.data.total;
        this.tableDataPage.currentPage = res.data.data.currentPage;
      });
    },

    //按下 审核/详细信息 按钮
    checkClick(row) {
      this.checkDialog.checkDialogVisible = true;
      this.checkDialog.info = row;
    },
    //同意申请
    applySuccess() {
      this.checkDialog.checkDialogVisible = false;
    },
    //拒绝申请
    applyFail() {
      this.checkDialog.checkDialogVisible = false;
    },
  },
  filters: {
    // 状态码过滤器  根据状态码显示状态
    setStatusText(value) {
      switch (value) {
        case 0:
          return "未审核";
        case 1:
          return "通过";
        case 2:
          return "未通过";
        case 3:
          return "已取消";
        default:
          return "未知";
      }
    },
    //性别过滤器 根据值 1/0 转换成 男/女
    setSexText(value) {
      if (value === "1") {
        return "男";
      } else if (value === "0") {
        return "女";
      } else {
        return "未知";
      }
    },
  },
  created() {
    getPagList({
      pageSize: this.tableDataPage.pageSize,
      currentPage: this.tableDataPage.currentPage,
    }).then((res) => {
      this.tableData = res.data.data.data;
      this.tableDataPage.total = res.data.data.total;
      this.tableDataPage.currentPage = res.data.data.currentPage;
    });
  },
};
</script>

<style lang="less" scoped>
.icon {
  font-size: 15px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;

  .card-body {
    margin-bottom: 18px;
    min-height: 28rem;
  }
}

.student-info-box {
  display: flex;

  img {
    width: 200px;
    height: 200px;
  }

  .info {
    margin-left: 50px;
  }
}
</style>